<template>
	<view>
		<!-- 推荐区域 开始 -->
		<swiper class="recommend" vertical autoplay circular>
			<swiper-item class="recommend-item" v-for="(item, index) in recommendList" :key="index">
				<view class="recommend-1">
					<image :src="item.img1" mode="aspectFit"></image>
					<text>{{ item.username1 }}</text>
				</view>
				<view class="recommend-2"> 
					<image :src="item.img2" mode="aspectFit"></image>
					<text>{{ item.username2 }}</text>
				</view>
				<view class="recommend-3">
					<image :src="item.img3" mode="aspectFit"></image>
					<text>{{ item.username3 }}</text>
				</view>
			</swiper-item>
		</swiper>
		<!-- 推荐区域 结束 -->
	</view>
</template>

<script>
export default {
	name: 'my-recommend',
	data() {
		return {
			// 推荐数据
			recommendList: [
				{
					id: 0,
					img1:
						'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fc-ssl.duitang.com%2Fuploads%2Fitem%2F202001%2F22%2F20200122224820_seqph.thumb.1000_0.jpg&refer=http%3A%2F%2Fc-ssl.duitang.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1652127771&t=7cb2b06431716ac6321830399db61563',
					username1: '迪丽热巴',
					img2:
						'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fc-ssl.duitang.com%2Fuploads%2Fblog%2F202110%2F31%2F20211031194512_09f23.thumb.1000_0.jpeg&refer=http%3A%2F%2Fc-ssl.duitang.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1652128377&t=f5b1e5b4db41683368ca1428624abdf0',
					username2: '杨幂',
					img3:
						'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fc-ssl.duitang.com%2Fuploads%2Fblog%2F202106%2F24%2F20210624091925_192dc.thumb.1000_0.jpg&refer=http%3A%2F%2Fc-ssl.duitang.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1652128608&t=12091e98cc5c39f205070d35dbef626d',
					username3: '赵丽颖'
				},
				{
					id: 2,
					img1:
						'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Finews.gtimg.com%2Fnewsapp_bt%2F0%2F13561640470%2F1000.jpg&refer=http%3A%2F%2Finews.gtimg.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1652171464&t=4bc749c2b2f43c8ffcc6ebfc1250fadf',

					username1: '迪丽热巴',
					img2:
						'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fc-ssl.duitang.com%2Fuploads%2Fitem%2F202004%2F02%2F20200402003038_klidb.jpg&refer=http%3A%2F%2Fc-ssl.duitang.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1652171464&t=6db84fd8005cad9243c384d716e76bbe',
					username2: '迪丽热巴',
					img3:
						'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fc-ssl.duitang.com%2Fuploads%2Fitem%2F202004%2F13%2F20200413161725_qhxud.jpg&refer=http%3A%2F%2Fc-ssl.duitang.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1652171781&t=babeaa1265cbbffca382fd90552b7300',
					username3: '迪丽热巴'
				}
			]
		}
	}
}
</script>

<style lang="less">
.recommend {
	height: 208rpx;
	background-color: #fff;
	.recommend-item {
		display: flex;
		justify-content: center;
		align-items: center;
		view {
			display: flex;
			flex-direction: column;
			width: 118rpx;
			height: 164rpx;
			margin: 0 60rpx;
			image {
				width: 100%;
				height: 118rpx;
				border-radius: 100%;
				margin-bottom: 10rpx;
				box-shadow: 0 2px 2px rgba(0, 0, 0, 0.3);
				border: 2rpx solid #ffaa00;
			}
			text {
				text-align: center;
				font-size: 28rpx;
				color: #ffaa00;
			}
		}
	}
}
</style>
